<template>
	<view class="contain">
		<view class="msg-tlt">答题完成后方可报名</view>
		<view class="main">
			<view class="main-tlt flex-lr">
				<text>第{{ current }}题</text>
				<text>共{{ maxLen }}题</text>
			</view>
			<view class="main-question">{{ info.title }}</view>
			<view class="main-answer">
				<u-radio-group v-model="info.user_answer" placement="column" v-if="info.type == 0">
					<u-radio
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'A: ' + info.optiona"
						name="A"
						v-if="info.optiona"
					>
					</u-radio>
					<u-radio
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'B: ' + info.optionb"
						name="B"
						v-if="info.optionb"
					>
					</u-radio>
					<u-radio
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'C: ' + info.optionc"
						name="C"
						v-if="info.optionc"
					>
					</u-radio>
					<u-radio
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'D: ' + info.optiond"
						name="D"
						v-if="info.optiond"
					>
					</u-radio>
					<u-radio
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'E: ' + info.optione"
						name="E"
						v-if="info.optione"
					>
					</u-radio>
					<u-radio
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'F: ' + info.optionf"
						name="F"
						v-if="info.optionf"
					>
					</u-radio>
				</u-radio-group>
				<u-checkbox-group v-model="info.user_answer" placement="column" v-else>
					<u-checkbox
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'A: ' + info.optiona"
						name="A"
						v-if="info.optiona"
					>
					</u-checkbox>
					<u-checkbox
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'B: ' + info.optionb"
						name="B"
						v-if="info.optionb"
					>
					</u-checkbox>
					<u-checkbox
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'C: ' + info.optionc"
						name="C"
						v-if="info.optionc"
					>
					</u-checkbox>
					<u-checkbox
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'D: ' + info.optiond"
						name="D"
						v-if="info.optiond"
					>
					</u-checkbox>
					<u-checkbox
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'E: ' + info.optione"
						name="E"
						v-if="info.optione"
					>
					</u-checkbox>
					<u-checkbox
						:customStyle="{ marginBottom: '46rpx' }"
						:activeColor="detailInfo.raceColor || '#0071c5'"
						:label="'F: ' + info.optionf"
						name="F"
						v-if="info.optionf"
					>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="main" v-if="info.user_answer">
			<view class="main-tlt flex-lr">答案与解析</view>
			<view class="main-question">正确答案：{{ info.answer }}</view>
			<view class="main-question" style="margin: 20rpx 0 6rpx">答案解析:</view>
			<u-parse :content="info.answerAnalysis"></u-parse>
		</view>
		<view class="footer">
			<button
				class="footer-btn footer-btn-cancel"
				@click="changeQuestion('prev')"
				v-if="current !== 1"
				:style="{
					color: detailInfo.raceColor || '#0071c5',
					borderColor: detailInfo.raceColor || '#0071c5'
				}"
			>
				上一题
			</button>
			<button
				class="footer-btn"
				:class="{ 'btn-single': current === 1 }"
				:style="{
					'background-color': detailInfo.raceColor || '#0071c5',
					borderColor: detailInfo.raceColor || '#0071c5'
				}"
				@click="changeQuestion('next')"
			>
				{{ current !== maxLen && maxLen > 0 ? '下一题' : '提交' }}
			</button>
		</view>
	</view>
</template>

<script>
const app = getApp()
export default {
	data() {
		return {
			id: '',
			detailInfo: {},
			maxLen: 0,
			current: 1,
			questionData: []
		}
	},
	onLoad(options) {
		console.log(options)
		this.id = options.id
		this.getDetailInfo()
		this.getQuestion()
	},
	computed: {
		info() {
			return this.questionData[this.current - 1]
		}
	},
	methods: {
		getDetailInfo(id) {
			/* prettier-ignore */
			this.$https( true, 'get', {
				url:'/race/race/info/'+this.id,
				data: {}
			},(res) => {
				res.data.focusArr = res.data.focus?JSON.parse(res.data.focus):[]
				this.detailInfo = res.data
			})
			/* prettier-ignore */
		},
		// 问题列表
		getQuestion(id) {
			/* prettier-ignore */
			this.$https( true, 'get', {
				url:'/race/race/question/'+this.id,
				data: {}
			},(res) => {
				this.questionData = res.data
				this.maxLen = this.questionData.length
				if(this.maxLen==0){
					if (this.detailInfo.isSign == 1) {
						this.$utils.navigateTo(true, `/pagesA/sign/qianming?id=${this.id}`)
					} else {
						this.$utils.navigateTo(true, `/pagesA/sign/detail?id=${this.id}`)
					}
				}
			})
			/* prettier-ignore */
		},
		// 题目切换
		changeQuestion(type) {
			if (type !== 'prev') {
				if (!this.info.user_answer && type !== 'prev') {
					uni.$u.toast('请答题！')
					return
				}
				if (this.info.user_answer !== this.info.answer && this.info.type == 0) {
					uni.$u.toast('请选择正确答案！')
					return
				}
				if (this.info.type == 1) {
					const arr = this.info.user_answer.sort()
					const arr2 = this.info.answer.split(',').sort()
					if (arr.join(',') !== arr2.join(',')) {
						uni.$u.toast('请选择正确答案！')
						return
					}
				}
			}

			if (type === 'prev') {
				this.current--
			} else if (this.current === this.maxLen) {
				app.globalData.signInfo.questions = this.questionData.map((item) => {
					return {
						id: item.id,
						answer:
							typeof item.user_answer === 'object' ? item.user_answer.join(',') : item.user_answer
					}
				})
				if (this.detailInfo.isSign == 1) {
					this.$utils.navigateTo(true, `/pagesA/sign/qianming?id=${this.id}`)
				} else {
					this.$utils.navigateTo(true, `/pagesA/sign/detail?id=${this.id}`)
				}
			} else if (type === 'next') {
				this.current++
			}
		}
	}
}
</script>

<style scoped lang="scss">
.contain {
	min-height: calc(100vh - 130rpx);
	padding-bottom: 130rpx;
}
.msg-tlt {
	font-size: 28rpx;
	color: #333;
	padding: 20rpx 32rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}
.main {
	margin: 0 26rpx 20rpx;
	padding: 20rpx 26rpx;
	background-color: #fff;
	&-tlt {
		border-bottom: 1px solid #eee;
		padding-bottom: 22rpx;
		margin-bottom: 32rpx;
		font-size: 26rpx;
	}
	&-answer {
		margin: 60rpx 24rpx 0;
	}
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-btn {
		width: 332rpx;
		height: 80rpx;
		// background-color: #0071c5;
		border: 1px solid #0071c5;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0;
		&-cancel {
			background-color: #fff;
			color: #0071c5;
			margin-right: 22rpx;
		}
	}
}
.btn-single {
	width: 684rpx;
}
</style>
